<template>
  <div class="introduce-container">
    <!-- 开源仓库信息卡片 -->
    <el-card class="repo-card" shadow="hover">
      <div class="repo-header">
        <svg class="repo-icon" viewBox="0 0 24 24">
          <path
            fill="#d90213"
            d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12a12 12 0 0 0 12-12A12 12 0 0 0 12 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.59.59 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"
          ></path>
        </svg>
        <h2>开源仓库</h2>
      </div>

      <div class="repo-info">
        <div class="info-item">
          <span class="label">项目名称：</span>
          <span class="value">🐷记账管理系统</span>
        </div>
        <div class="info-item">
          <span class="label">仓库地址：</span>
          <a href="https://gitee.com/wys_666/backend-manage" target="_blank" class="value link">
            https://gitee.com/wys_666/backend-manage
          </a>
        </div>
        <div class="info-item">
          <span class="label">技术栈：</span>
          <el-tag type="info">Vue3</el-tag>
          <el-tag type="info">Element Plus</el-tag>
          <el-tag type="info">Node.js</el-tag>
        </div>
        <!-- 新增贡献者 -->
        <div class="info-item">
          <span class="label">贡献者：</span>
          <div class="contributors">
            <el-avatar
              :size="30"
              src="https://foruda.gitee.com/avatar/1709109529810178341/13054075_wys_666_1709109529.png!avatar200"
            />
            <el-avatar
              :size="30"
              src=""
            />
          </div>
        </div>
      </div>

      <div class="repo-actions">
        <el-button type="primary" icon="Star" class="star-btn" @click="openRepo">前往仓库</el-button>
        <el-button icon="Download" @click="downloadRepo">下载源码</el-button>
      </div>
    </el-card>

    <!-- README内容展示 -->
    <el-card class="readme-card" shadow="hover">
      <div class="readme-header">
        <svg class="readme-icon" viewBox="0 0 24 24">
          <path
            fill="currentColor"
            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
          />
        </svg>
        <h2>项目说明</h2>
      </div>

      <el-scrollbar class="readme-content">
        <!-- 骨架屏效果 -->
        <el-skeleton v-if="loading" :rows="8" animated>
          <template #default>
            <div>
              <h2></h2>
              <p></p>
              <p></p>
              <h3></h3>
              <p></p>
              <pre><code></code></pre>
              <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </template>
        </el-skeleton>

        <div v-else-if="readmeContent" class="markdown-body" v-html="readmeContent"></div>

        <div v-else-if="error" class="error-message">
          <el-alert :title="error" type="error" :closable="false" />
        </div>

        <div v-else class="empty-message">
          <el-empty description="暂无项目说明" />
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { marked } from 'marked'
  import DOMPurify from 'dompurify'
  import { ElMessage } from 'element-plus'
  import hljs from 'highlight.js'
  import 'github-markdown-css/github-markdown.css'
  import 'highlight.js/styles/github.css'

  // 配置marked
  marked.setOptions({
    highlight: (code, lang) => {
      const language = hljs.getLanguage(lang) ? lang : 'plaintext'
      return hljs.highlight(code, { language }).value
    },
    gfm: true,
    breaks: true,
    tables: true,
  })

  const readmeContent = ref(null)
  const loading = ref(true)
  const error = ref(null)

  // 获取并解析README.md文件
  const fetchReadme = async () => {
    try {
      const response = await fetch('/README.md')
      if (!response.ok) {
        throw new Error('README文件加载失败')
      }

      const markdown = await response.text()
      // 使用marked解析markdown，并使用DOMPurify进行安全过滤
      const rawHtml = marked.parse(markdown)

      setTimeout(() => {
        readmeContent.value = DOMPurify.sanitize(rawHtml)
        loading.value = false
        // 高亮代码块
        setTimeout(() => {
          document.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightBlock(block)
          })
        }, 50)
      }, 800) // 最少显示0.8秒骨架屏
    } catch (err) {
      error.value = `加载项目说明失败: ${err.message}`
      console.error('加载README失败:', err)
      loading.value = false
    }
  }

  // 打开仓库链接
  const openRepo = () => {
    window.open('https://gitee.com/wys_666/backend-manage', '_blank')
  }

  // 下载源码（模拟）
  const downloadRepo = () => {
    ElMessage.success('已开始下载项目源码')
    window.open('https://gitee.com/wys_666/backend-manage/repository/archive/master.zip', '_blank')
  }

  onMounted(fetchReadme)
</script>

<style scoped>
  .introduce-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .repo-card,
  .readme-card {
    margin-bottom: 30px;
    background-color: #fdfdfc;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid #ebeef5;
    transition:
      transform 0.3s,
      box-shadow 0.3s;
  }

  .repo-card:hover,
  .readme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .repo-header,
  .readme-header {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
  }

  .repo-header h2,
  .readme-header h2 {
    margin: 0 0 0 12px;
    font-size: 20px;
    color: #303133;
  }

  .repo-icon {
    width: 32px;
    height: 32px;
    color: #24292e;
  }

  .readme-icon {
    width: 32px;
    height: 32px;
    color: #409eff;
  }

  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 15px;
  }

  .label {
    font-weight: 600;
    color: #606266;
    min-width: 80px;
    text-align: right;
  }

  .value {
    color: #303133;
    flex: 1;
  }

  .link {
    color: #409eff;
    text-decoration: none;
    transition: color 0.2s;
  }

  .link:hover {
    color: #66b1ff;
    text-decoration: underline;
  }

  .repo-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 12px;
  }

  .star-btn {
    background: linear-gradient(135deg, #409eff, #66b1ff);
    border: none;
  }

  .readme-content {
    height: 750px;
    padding: 0 15px;
  }

  .markdown-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #24292e;
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3 {
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
  }

  .markdown-body h1 {
    font-size: 2em;
  }

  .markdown-body h2 {
    font-size: 1.5em;
  }

  .markdown-body h3 {
    font-size: 1.25em;
  }

  .markdown-body pre {
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
  }

  .markdown-body code {
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    font-size: 85%;
    padding: 0.2em 0.4em;
  }

  .error-message {
    padding: 20px;
    text-align: center;
  }

  .empty-message {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contributors {
    display: flex;
    gap: 10px;
  }

  .screenshot-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f5f7fa, #e4efe9);
    border-radius: 8px;
    color: #606266;
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .introduce-container {
      padding: 10px;
    }

    .repo-card,
    .readme-card {
      margin-bottom: 20px;
    }

    .info-item {
      flex-direction: column;
      align-items: flex-start;
    }

    .label {
      text-align: left;
      margin-bottom: 5px;
    }

    .repo-actions {
      flex-direction: column;
    }

    .repo-actions .el-button {
      width: 100%;
      margin-bottom: 10px;
    }
  }
</style>
